1import Box from '@mui/material/Box';
  2import Container from '@mui/material/Container';
  3import {useTheme} from '@mui/material/styles';
  4import {PropsWithChildren} from 'react';
  5import pageUtils from '../../../lib/pageUtils';
  6import useEventStore from '../../../stores/useEventStore';
  7import EventLayout, {TabComponent} from '../../../layouts/Event';
  8import {
  9  EventByUuidDocument,
 10  Module,
 11  ModuleDocument,
 12  Enum_Userspermissionsuser_Lang as SupportedLocales,
 13} from '../../../generated/graphql';
 14import CarosterPlusOption from '../../../containers/CarosterPlusOption';
 15import CarosterPlusSettings from '../../../containers/CarosterPlusSettings';
 16import {Card, Typography} from '@mui/material';
 17import {useTranslation} from 'next-i18next';
 18
 19interface Props {
 20  modulesSettings?: Module;
 21  eventUUID: string;
 22  announcement?: string;
 23}
 24
 25const Page = (props: PropsWithChildren<Props>) => {
 26  return <EventLayout {...props} Tab={OptionsTab} />;
 27};
 28
 29const OptionsTab: TabComponent<Props> = ({modulesSettings}) => {
 30  const {t} = useTranslation();
 31  const theme = useTheme();
 32  const event = useEventStore(s => s.event);
 33
 34  if (!event) return null;
 35
 36  const carosterPlusActivated =
 37    modulesSettings?.caroster_plus_enabled &&
 38    event.enabled_modules?.includes('caroster-plus');
 39
 40  return (
 41    <Box position="relative">
 42      <Container
 43        sx={{
 44          p: 4,
 45          mt: 6,
 46          mb: 11,
 47          mx: 0,
 48          [theme.breakpoints.down('md')]: {
 49            p: 2,
 50          },
 51        }}
 52      >
 53        {carosterPlusActivated && <CarosterPlusSettings event={event} />}{' '}
 54        {modulesSettings?.caroster_plus_enabled && !carosterPlusActivated && (
 55          <CarosterPlusOption event={event} modulesSettings={modulesSettings} />
 56        )}
 57        {!modulesSettings?.caroster_plus_enabled && (
 58          <Typography variant="overline">{t`options.no_module`}</Typography>
 59        )}
 60      </Container>
 61    </Box>
 62  );
 63};
 64
 65export const getServerSideProps = pageUtils.getServerSideProps(
 66  async (context, apolloClient) => {
 67    const {uuid} = context.query;
 68    const {host = ''} = context.req.headers;
 69    let event = null;
 70    let modulesSettings = null;
 71
 72    // Fetch event
 73    try {
 74      const {data} = await apolloClient.query({
 75        query: EventByUuidDocument,
 76        variables: {uuid},
 77      });
 78      event = data?.eventByUUID?.data;
 79    } catch (error) {
 80      return {
 81        notFound: true,
 82      };
 83    }
 84
 85    // Fetch modules settings
 86    try {
 87      const {data} = await apolloClient.query({
 88        query: ModuleDocument,
 89        variables: {locale: context.locale},
 90      });
 91      modulesSettings = data?.module?.data?.attributes || {};
 92
 93      const {caroster_plus_description, caroster_plus_name} = modulesSettings;
 94
 95      if (
 96        caroster_plus_description &&
 97        caroster_plus_name &&
 98        String(caroster_plus_description).length === 0 &&
 99        String(caroster_plus_name).length === 0
100      ) {
101        console.warn(
102          'Module settings are not set for locale: ',
103          context.locale,
104          ' fallback to English'
105        );
106        const {data: enData} = await apolloClient.query({
107          query: ModuleDocument,
108          variables: {locale: SupportedLocales['en']},
109        });
110        modulesSettings = enData?.module?.data?.attributes;
111      }
112    } catch (error) {
113      console.error(error);
114    }
115
116    return {
117      props: {
118        modulesSettings,
119        eventUUID: uuid,
120        metas: {
121          title: event?.attributes?.name || '',
122          url: `https://${host}${context.resolvedUrl}`,
123        },
124      },
125    };
126  }
127);
128export default Page;